<template>
  <div style="height: 100%">
    <el-menu
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#4b535b"
      text-color="#fff"
      active-text-color="#ffd04b" router style="height: 100%">
      <div style="margin: 10px 30%">
        <i class="el-icon-position setting"></i>
      </div>
      <el-submenu index="1">
        <template slot="title">
          <svg class="icon" aria-hidden="true">
            <use  xlink:href="#iconcaidan"></use>
          </svg>
          <span>调查管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/main/statisfaction">
            <i class="iconfont iconjiaoshimanyidu"></i>
            满意度调查
          </el-menu-item>
          <el-menu-item index="/main/addStatisfaction">
            <i class="iconfont icontianjia"></i>
            增加
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="2">
        <template slot="title">
          <svg class="icon" aria-hidden="true">
            <use  xlink:href="#iconyonghuguanli1"></use>
          </svg>
          <span>学员管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/main/class">
            <i class="iconfont iconbanjiguanli"></i>
            班级管理
          </el-menu-item>
          <el-menu-item index="/main/student">
            <i class="iconfont iconwodexueyuan"></i>
            学生管理
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="3">
        <template slot="title">
          <svg class="icon" aria-hidden="true">
            <use  xlink:href="#iconqitatongyong"></use>
          </svg>
          <span>其它</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="3-1">
            <i class="iconfont iconyunyingguanli_huodongguanli"></i>
            活动管理
          </el-menu-item>
          <el-menu-item index="3-2">
            <svg class="icon" aria-hidden="true">
              <use  xlink:href="#iconyonghuguanli2"></use>
            </svg>
            老师管理
          </el-menu-item>
          <el-menu-item index="3-3">
            <svg class="icon" aria-hidden="true">
              <use  xlink:href="#iconyonghuguanli1"></use>
            </svg>
            用户管理
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
  export default {
    name: "aside-nav",
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style scoped>
  .el-menu{
    border-right-width: 0px;
  }
  .setting{
    font-size: 2.2em;
    color: #00CCFF;
  }
</style>
